<template>
    <div class="body orderDiscuss">
        <div class="pjiscion p after-set-li">
            <ul>
                <a @click="turnNav(-1)">
                    <li :class="{ red: status == -1 }">
                        <p>全部评价</p>
                        <p></p>
                    </li>
                </a>
                <a @click="turnNav(0)">
                    <li :class="{ red: status == 0 }">
                        <p>待评价</p>
                        <p></p>
                    </li>
                </a>
                <a @click="turnNav(1)">
                    <li :class="{ red: status == 1 }">
                        <p>已评价</p>
                        <p></p>
                    </li>
                </a>
            </ul>
        </div>

        <div class="quedbox bg_white">
            <!--<div class="sonfbst">-->
            <!--<div class="maleri30">-->
            <!--<span><i class="fbs"></i>立即发表评价晒图，最多可获得50积分</span>-->
            <!--</div>-->
            <!--</div>-->
            <div class="fukcuid mae">
                <div class="maleri30">
                    <div
                        class="shopprice dapco p"
                        v-for="(item, index) in pageListInfo.comment_list"
                        :key="index"
                    >
                        <div class="img_or fl">
                            <img :src="item.img_link" />
                        </div>
                        <div class="fon_or fl">
                            <h2 class="similar-product-text">
                                <a href="/mobile/Goods/goodsInfo/id/311.html"
                                    >{{ item.goods_name }}
                                </a>
                            </h2>
                            <p class="pall0 first"></p>
                            <p class="pall0">
                                购买时间：{{ item.pay_time | timer }}
                            </p>
                            <div class="dyeai">
                                <!--<i class="said"></i>-->
                                <a
                                    v-if="item.is_comment == 0"
                                    class="compj hfr"
                                    @click="
                                        $router.push({
                                            path: '/dicuss',
                                            query: { rec_id: item.rec_id },
                                        })
                                    "
                                    >评价订单</a
                                >
                                <a
                                    v-if="item.is_comment == 1"
                                    @click="
                                        $router.push({
                                            path: '/disscussDetail',
                                            query: {
                                                comment_id: item.comment_id,
                                            },
                                        })
                                    "
                                    class="compj hfr nomar"
                                    >查看评价</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="nocoment"
            v-show="pageListInfo.comment_list.length == 0 && pageInfo.pageSatus"
        >
            <img src="../../assets/images/pl.png" />
            <p>你还没有任何评论哦~</p>
        </div>
        <!-- 分页 -->
        <component
            :is="'Pagination'"
            :pageInfo="pageInfo"
            @pageNext="pageNext"
            @changePageStatus="changePageStatus"
        ></component>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            status: 0,
            pageListInfo: {
                comment_list: [],
            },
            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    computed: {},
    mounted() {
        this.pageListInfo.comment_list = [];
        this.pageInfo.pageSatus = false;
        this.getList();
    },
    methods: {
        turnNav(id) {
            this.status = id;
            this.pageListInfo.comment_list = [];
            this.pageInfo.pageSatus = false;
            this.getList();
        },
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getList(data); // 根据type获取订单
        },
        // 获取评价订单列表
        getList(page = 1, page_size = 10) {
            axiosPost(
                '/api/order/comment',
                {
                    status: this.status,
                    page: page,
                    page_size: page_size,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.page.current_page == res.data.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.comment_list.forEach((element) => {
                        this.pageListInfo.comment_list.push(element);
                    });

                    this.pageListInfo.page = res.data.page;
                    this.pageListInfo.user_money = res.data.user_money;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.orderDiscuss {
    .pjiscion ul li {
        font-size: 0.64rem;
        color: #333333;
        height: 2.07rem;
        line-height: 2.07rem;
    }
    .pjiscion ul .red {
        border: none;
        position: relative;
    }
    .pjiscion ul .red:before {
        content: '';
        position: absolute;
        width: 1.07rem;
        height: 0.11rem;
        background-color: #ff4139;
        bottom: 0;
        left: 2.1rem;
    }
    .pjiscion {
        padding: 0;
    }
    .pjiscion ul .red {
        padding: 0;
    }
    .quedbox {
        margin: 0;
        border-top: 0.2rem solid #f0f1f3;
    }
    .shopprice .img_or img {
        width: 3.84rem;
        height: 3.84rem;
    }
    .mae .maleri30 {
        margin: 0;
    }
    .mae .shopprice .fon_or {
        margin: 0;
        width: 10.84rem;
        height: 4rem;
        position: relative;
    }
    .shopprice .img_or {
        margin: 0;
    }
    .bg_white .fukcuid .fon_or h2 {
        margin: 0.45rem 0 0 0.53rem;
        height: 1.25rem;
        line-height: 0.65rem;
    }
    .pall0 {
        padding-left: 0.53rem;
        margin-top: 0.43rem;
        width: 8.5rem;
        position: absolute;
        bottom: 0.5rem;
    }
    .pall0.first {
        bottom: 1.5rem;
    }
    .dapco .nomar {
        height: 0.9rem;
        border-radius: 0.45rem;
        border: solid 0.02rem #dadada;
        font-size: 0.47rem;
        color: #1c1c1c;
        padding: 0.21rem 0.43rem;
    }
    .dyeai {
        clear: none;
        overflow: visible;
        position: absolute;
        right: 0;
        top: 3.5rem;
    }
    .hfr {
        position: absolute;
        right: -0.5rem;
        bottom: 0.2rem;
    }
    .dapco .compj {
        height: 0.9rem;
        border-radius: 0.45rem;
        font-size: 0.47rem;
        width: 3rem;
        padding: 0;
        line-height: 0.9rem;
        text-align: center;
    }
    .shopprice {
        border: 0.21rem solid #f0f1f3;
        border-top: none;
        height: 4.05rem;
        position: relative;
    }
}
</style>
